<script setup>
import {reactive} from "vue";

const props = defineProps({
  percent:{
    type:Number,
    default:0
  }
})


const opts = reactive({
  title: {
    name: (props.percent * 100) + "%",
    fontSize: 12,
    color: "#0099fe",
    offsetY: 0
  },
  subtitle: {
    name: "",
    fontSize: 0,
    color: "#fff",
    offsetY: 0
  },
  extra: {
    arcbar: {
      type: "circle",
      width: 6,
      backgroundColor: "#dddddd",
      startAngle: 1.5,
      endAngle: 0.25,
      gap: 0
    }
  }
})
const chartData = reactive({
  series: [
    {
      name: "完成率",
      color: "#0099fe",
      data: props.percent
    }
  ]
})

</script>

<template>
  <qiun-data-charts
    :chart-data="chartData"
    :opts="opts"
    type="arcbar"
  />
</template>

<style scoped lang="scss">

</style>
